<template name="components">
	<view>
		<cu-custom bgImage="https://zhhq.lzfsd.com/images/zhty/bg1.jpg">
			<block slot="content">
				<image src="/static/images/sport.png" mode="aspectFill" style="width: 240upx;height: 60upx;"></image>
			</block>
		</cu-custom>
		
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" v-on:clickItem="onClickItem" :styleType="styleType" :activeColor="activeColor"></uni-segmented-control>
		</view>
		<view class="cardcontent">
			<view v-show="current === 0">
				<view class="page-section page-section-gap">
					<map style="width:100%; height:250px;" :latitude="latitude" :longitude="longitude">
					</map>
					<cover-image class="img" :style="controlsRunStyle" @click="run" src="/static/images/run.png"></cover-image>
				</view>
			</view>
			<view v-show="current === 1">
				<view class="page-section page-section-gap">
					<map style="width:100%;height:250px;" :latitude="latitude" :longitude="longitude">
					</map>
					<cover-image class="img" :style="controlsRunStyle" @click="bicycl" src="/static/images/bike.png"></cover-image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSegmentedControl from '@/components/uni-segmented-control/uni-segmented-control.vue'
	import uniFab from '@/components/uni-fab.vue';
	export default {
		components: {
			uniSegmentedControl,
			uniFab
		},
		name: "components",
		data() {
			return {
				latitude: 39.909,
				longitude: 116.39742,
				items: [
					'跑步',
					'骑行'
				],
				current: 0,
				colorIndex: 0,
				activeColor: '#032b57',
				styleType: 'text',
				
				controlsRunStyle: ''
			}
		},
		onShow() {
			this.getMyLocation();
			this.initView();
		},
		methods: {
			getMyLocation:function(){
				var me = this;
				uni.getLocation({
					type: 'gcj02',
					success: function (res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						me.latitude = res.latitude;
						me.longitude = res.longitude;
					}
				});
			},
			
			initView:function(){
				var me = this;
				uni.getSystemInfo({
					success: function (res) {
						var screenWidth = res.screenWidth;
						me.controlsRunStyle = "left: "+ (screenWidth/2 - 40) +"px;";
					}
				});
			},
			
			onClickItem(index) {
				if (this.current !== index) {
					this.current = index;
				}
			},
			
			run(){
				uni.navigateTo({
					url: '/pages/sport/countDown?type=1'
				});
			},
			
			bicycl(){
				uni.navigateTo({
					url: '/pages/sport/countDown?type=2'
				});
			}
		}
	}
</script>

<style>
	.cardcontent{
		padding-top: 30upx;
	}
	
	.img {
        position: absolute;
        width: 80px;
        height: 80px;
        top: 50%;
        margin-top: -130upx;
    }
</style>
